<template>
	<view class="page-bg">
		<view class="d-flex a-center j-sb px-4 " style="height: 88upx;background-color: #FFFFFF;">
			<view class="d-flex label-wrapper">
				<view @click="switchModel(item.id)" class="label-item" :class="[defaultModel == item.id?'active':'']" v-for="(item,index) in moduleConfig"
				 :key="index">
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<swiper @change="swiperChange" :current="defaultModel" :style="'height:' + scrollH + 'px;'">
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:' + scrollH + 'px;'">
					<view>
						<view v-for="(item,index) in articleList" :key="index" @click="skipToHuxingPage(item)" class="d-flex flex-column border-bottom article-box">
							<view class="article-title d-flex">
								<image src="../../../../static/images/estate/author.png" mode="" style="width: 76upx;height: 76upx;margin-right: 10upx;"></image>
							    <view class="d-flex flex-column">
									<text class="article-title-name">{{item.userName}}</text>
									<text class="article-title-date">{{item.commentDate}}</text>
								</view>
							</view>
							<view style="line-height: 48upx;">
								<text>{{item.comment}}</text>
							</view>
							<view class="d-flex">
								<image :src="item.thumb" style="width: 200upx;height: 160upx;" mode=""></image>
								<view class="d-flex flex-column artice-con" style="">
									<text class="single-row-over">{{item.title}}</text>
									<view class="d-flex j-sb">
										<text style="color: #CCCCCC;font-size: 24upx;">{{item.address}}</text>
										<text style="color: red;font-size: 24upx;">{{item.price}}</text>
									</view>
								</view>
							</view>
							<view class="d-flex j-sb" style="color: #CCCCCC;">
								<text style="font-size: 26upx;">浏览{{item.viewsCount}}次</text>
								<!-- <view style="font-size: 26upx;">
									<text class="iconfont icon-dianzan1" style="margin-right: 10upx;"></text>
									<text style="margin-right: 10upx;">(9)</text>
									<text class="iconfont icon-comment1" style="margin-right: 10upx;"></text>
									<text>(2)</text>
								</view> -->
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:' + scrollH + 'px;'">
					<view>
						<view v-for="(item,index) in articleList" @tap="skipToArticlePage(item)" :key="index" class="d-flex flex-column border-bottom article-box">
							<view class="article-title d-flex">
								<image src="../../../../static/images/estate/author.png" mode="" style="width: 76upx;height: 76upx;margin-right: 10upx;"></image>
							    <view class="d-flex flex-column">
									<text class="article-title-name">{{item.userName}}</text>
									<text class="article-title-date">{{item.commentDate}}</text>
								</view>
							</view>
							<view>
								<text>{{item.comment}}</text>
							</view>
							<view class="d-flex">
								<image :src="item.thumb" style="width: 200upx;height: 160upx;" mode=""></image>
								<view class="d-flex flex-column artice-con" style="">
									<text class="single-row-over">{{item.title}}</text>
									<text style="color: #CCCCCC;font-size: 24upx;">{{item.origin}}</text>
								</view>
							</view>
							<view class="d-flex j-sb" style="color: #CCCCCC;">
								<text style="font-size: 26upx;">浏览{{item.viewsCount}}次</text>
								<!-- <view style="font-size: 26upx;">
									<text class="iconfont icon-dianzan1" style="margin-right: 10upx;"></text>
									<text style="margin-right: 10upx;">(9)</text>
									<text class="iconfont icon-comment1" style="margin-right: 10upx;"></text>
									<text>(2)</text>
								</view> -->
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:' + scrollH + 'px;'">
					<view>
						<view v-for="(item,index) in articleList" @click="skipToVideoPage(item)" :key="index" class="d-flex flex-column border-bottom article-box">
							<view class="article-title d-flex">
								<image src="../../../../static/images/estate/author.png" mode="" style="width: 76upx;height: 76upx;margin-right: 10upx;"></image>
							    <view class="d-flex flex-column">
									<text class="article-title-name">{{item.userName}}</text>
									<text class="article-title-date">{{item.commentDate}}</text>
								</view>
							</view>
							<view>
								<text>{{item.comment}}</text>
							</view>
							<view class="d-flex">
								<view style="position: relative;">
									<image class="video-pic" style="position: absolute;left: 50%;top: 50%;width: 60upx;height: 60upx;" src="../../../../static/tabbar/video.png" mode=""></image>
									<image :src="item.thumb" style="width: 200upx;height: 160upx;" mode=""></image>
								</view>
								<view class="d-flex flex-column artice-con" style="">
									<text class="single-row-over">{{item.title}}</text>
									<text style="color: #CCCCCC;font-size: 24upx;">{{item.origin}}</text>
								</view>
							</view>
							<view class="d-flex j-sb" style="color: #CCCCCC;">
								<text style="font-size: 26upx;">浏览{{item.viewsCount}}次</text>
								<!-- <view style="font-size: 26upx;">
									<text class="iconfont icon-dianzan1" style="margin-right: 10upx;"></text>
									<text style="margin-right: 10upx;">(9)</text>
									<text class="iconfont icon-comment1" style="margin-right: 10upx;"></text>
									<text>(2)</text>
								</view> -->
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniTag from "@/components/uni-ui/uni-tag/uni-tag.vue";
	import api from '@/common/lib/request.js';
	export default {
		data() {
			return {
				buildList: [],
				huxList: [],
				articleList: [],
				scrollH: 500,
				defaultModel: 0,
				username: '',
				moduleConfig: [{
						id: 0,
						name: "楼盘"
					},
					{
						id: 1,
						name: "文章"
					},
					{
						id: 2,
						name: "视频"
					}
				]
			}
		},
		watch:{
			defaultModel(newVal){
				let idx = newVal == 0?3:newVal;
				this.initArticleList(idx)
			}
		},
		components: {
			uniTag
		},
		onLoad(option) {
			this.username = option.username;
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(116);
				}
			});
			this.initArticleList(3)
		},
		methods: {
			switchModel(idx) {
				this.defaultModel = idx == 3?0:idx;
			},
			swiperChange(event){
				let currentIdx = event.detail.current;
				this.defaultModel = currentIdx == 3?0:currentIdx;
			},
			skipToLastPage(){
				uni.navigateBack({
				    delta: 1
				});
			},
			skipToHuxingPage(item){
				uni.navigateTo({
					url: '/pages/estate/estateDetail/estateDetail?contentId=' + item.contentId
				})
			},
			skipToArticlePage(item){
				const newsId = item.contentId;
				const url = item.url;
				uni.navigateTo({
					url:'/pages/index/news-detail/news-detail?id=' + newsId + '&link=' + url
				})
				//加入历史记录
				let list = uni.getStorageSync('history')
				list = list ? JSON.parse(list) : [];
				let index = list.findIndex(v=>v.contentId === newsId)
				if(list.length >= 50){
					list.pop()
				}
				if(index === -1){
					 list.unshift(item);
				     uni.setStorageSync('history',JSON.stringify(list))
				}else{
					for (var i = 0; i < list.length; i++) {
					            if (list[i].contentId === newsId) {
					                list.splice(i, 1); // 如果数据组存在该元素，则把该元素删除
					                break;
					            }
						}
					list.unshift(item);
					uni.setStorageSync('history',JSON.stringify(list))
				}
			},
			skipToVideoPage(item){
				uni.navigateTo({
					url:'/components/video-detail/video-detail?id=' + item.contentId + '&link=' + item.url
				})
			},
			initArticleList(type){
				let _this = this;
				let token = this.token = uni.getStorageSync('token');
				api.request({
						url: '/user/comments/detail',
						data: {
							type: type
						}
					})
					.then(response => {
						this.articleList = response.length > 0 ? response : [];
					})
					.catch(err => {
						console.log(err);
					});
			},
            checkEstateDetail(id) {
				return
                if (id) {
                    uni.navigateTo({
                        url: '/pages/estate/estateDetail/estateDetail?contentId=' + id
                    })
                }
            }
		}
	}
</script>

<style scoped>
	.page-bg{
		height: 100%;
		background-color: #F8F8F8;
	}
	.tip-wrap {
		height: 68upx;
		background: #F8F8F8;
		font-size: 24upx;
		color: #999999;
	}

	.label-wrapper {
		align-items: center;
		justify-content: space-around;
		font-size: 32upx;
		height: 84upx;
		text-align: center;
		font-weight: bold;
		width: 100%;
	}

	.label-item {
		display: flex;
		align-items: center;
		height: 100%;
		border-bottom: 2px solid #FFFFFF;
	}

	.label-item.active {
		height: 40px;
		border-color: #005BAD !important;
		display: flex;
		align-items: center;
		color: #005BAD;
	}
	.block-area{
		width: 100%;
		height: 20upx;
		background-color: #F8F8F8;
	}
	.article-title{
		height: 80upx;
		align-items: center;
	}
	.article-box{
		padding: 40upx 30upx 20upx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
	}
	.article-title-name{
		font-size: 32upx;
		color: #2A2A2A;
		font-weight: bold;
		line-height: 44upx;
	}
	.article-title-date{
		font-size: 26upx;
		color: #CCCCCC;
		line-height: 36upx;
	}
	.artice-con{
		background: #F9F9F9;
		width: 450upx;
		justify-content: space-around;
		padding: 20upx;
	}
	.video-pic{
		position: absolute;
		left: 50%;
		top: 50%;
		width: 60upx;
		height: 60upx;
		margin-left: -30upx;
		margin-top: -30upx;
		z-index: 888;
	}
</style>

